<style scoped>
.h1_tit button {
    display: block;
    height: 32px;
    line-height: 32px;
    float: right;
    width: 130px;
    border-radius: 16px;
    background: #1dc499;
    color: #fff;
    outline: none;
}

.modal-footer {
    background-color: #eff0f4;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    border-radius: 5px;
}

.modal-footer .cencert-add,
.cencert-save,
.cencert-cancel {
    border: 0;
    border-radius: 16px;
    background-color: #42B27A;
    color: #fff;
    text-align: center;
    width: 136px;
    height: 36px;
    line-height: 36px;
    outline: none;
}
#myModal-increase .form-horizontal .modal-footer .abandon{
    background-color: #f00;
    color: #fff;
}

#myModal-cancel .modal-footer {
    height: 90px;
    line-height: 90px;
}
.pages{padding: 20px}

/*内容区*/
.msg-list{
    height: 600px;
    overflow: auto;
}
.msg-list ul li{
    height: 76px;
    background: #fff;
    margin-top: 20px;
    border-radius: 5px;
}
.msg-list ul li p:first-child{
    height: 30px;
    line-height: 30px;
}
.msg-list ul li p span{
    display: inline-block;
}
.msg-list ul li p:first-child span:first-child{
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: orangered;
    border-radius: 50%;
    border: 1px solid orangered;
    margin-right: 3px;
}
.msg-list ul li p:first-child span:last-child{
    float: right;
    color: #666;
    margin-right: 20px;
    width: 30%;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-list ul li p:nth-child(2){
    height: 20px;
    line-height: 20px;
}
.msg-list ul li p:nth-child(2) span{
    margin-right: 30px;
    float: left;
}
.msg-list ul li p:nth-child(2) span:first-child{
    margin-left: 30px;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-list ul li p:nth-child(2) span:last-child{
    width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-list ul li p:last-child{
    height: 20px;
    line-height: 20px;
}
.msg-list ul li p:last-child span{
    float: right;
    padding: 0 15px;
    margin-right: 10px;
    cursor: pointer;
    text-align: center;
    background-size: 14px!important;
}
.msg-list ul li p:last-child span:first-child{
    color: #f00;
    background: url(../../assets/img/dele4.png) no-repeat left center;
}
.msg-list ul li p:last-child span:last-child{
    color: #42B27A;
    background: url(../../assets/img/h2_icon.png) no-repeat left center;
}

.modal-body .form-group label {
    width: 20%;
    text-align: right;
}
.modal-body .form-group label.top {
    vertical-align: top;
}

#myModal-increase .modal-body .form-group .form-control {
    width: 70%;
    text-align: left;
    text-indent: 10px;
    margin-left: 5px;
    display: inline-block;
}
#myModal-increase .modal-body .form-group .radio {
    display: inline-block;
}
#myModal-increase .modal-body .form-group .radio label{
    width: auto;
    margin: 0 30px;
}
/*时间选择*/
#selectedHM .modal-dialog{
    width: 60%;
}
#selectedHM .modal-body .form-group-time{
    float: left;
    width: 44%;
    height: 34px;
    line-height: 34px;
}
#selectedHM .modal-body .form-group-time label{
    float: left;
    margin-right: 4px;
}
#selectedHM .modal-body .form-group-time select{
    width: 60%;
}
#selectedHM .modal-footer{
    padding: 5px;
    height: 40px;
}
/*小时分钟未选择完整*/
.validation-tips{
    color: #f00;
    text-align: center;
    clear: both;
}
</style>

<template>
    <div class="index clearafter">
        <module-head></module-head>
        <div class="content flex">
            <div class="w220">
                <menu-list></menu-list>
            </div>
            <div class="w980 flex_full">
                <div class="flex flex_between">
                  <p class="flex flex_vcenter pdb20">
                    <i class="titleTag"></i>
                    <span class="fRedBig">消息群发维护</span>
                  </p>
                    <button data-toggle="modal" @click="newAddMsgTypeMaintain()" class="longBtn">消息类型维护</button>
                </div>

                <div class="memo-message clearfix">
                    <!-- 消息内容 -->
                    <div class="msg-list">
                        <ul>
                            <li v-for="($index,list) in getMsgList">
                                <p>
                                    <span v-text="$index+1"></span>
                                    <span v-text="list.messageName"></span>
                                    <span v-if="list.messageType == '01'">发送时间: 每天{{list.sendTime}}</span>
                                    <span v-if="list.messageType == '02'">发送时间: {{list.sendDate.substr(0,10)+' '+list.sendTime}}</span>
                                </p>
                                <p>
                                    <span>发送慢病组别: {{list.chronicName}}</span>
                                    <span>发送会员类型: {{list.memberName}}</span>
                                    <span>发送内容: {{list.content}}</span>
                                </p>
                                <p>
                                    <span class="abondon" @click="newAddMsgTypeMaintain('abandon',list)">废弃</span>
                                    <span class="modification" @click="newAddMsgTypeMaintain('modification',list)">修改</span>
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--新增/修改/作废-->
                <div class="modal fade" id="myModal-increase" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <form class="form-horizontal" @submit.prevent="saveMsgTypeMaintain">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" @click="closeModal">&times;</button>
                                <h4 class="modal-title" id="myModalLabel" v-text="operaTips"></h4>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="exampleInputName2">消息类型:</label>
                                    <div class="radio" @click="selectMsgType('birthday')">
                                      <label>
                                        <input type="radio" name="messageType" value="01" v-model="submitContent.messageType" :disabled="disables" />
                                        生日
                                      </label>
                                    </div>
                                    <div class="radio" @click="selectMsgType('festival')">
                                      <label>
                                        <input type="radio" name="messageType" value="02" v-model="submitContent.messageType" :disabled="disables" />
                                        节日
                                      </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputName2">消息名称:</label>
                                    <input name="messageName" type="text" class="form-control" placeholder="请输入消息名称" value="{{submitContent.messageName}}" v-model="submitContent.messageName" :disabled="disables" required  />
                                </div>
                                <div class="form-group" v-show="showSendDate">
                                    <label for="exampleInputName2">发送日期:</label>
                                    <input name="sendDate" type="text" id="send-date" class="form-control" placeholder="请选择发送的日期" value="{{submitContent.sendDate}}" v-model="submitContent.sendDate"  :disabled="disables" :required="showSendDate" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputName2">发送时间:</label>
                                    <input name="sendTime" type="text" id="send-time" class="form-control time" placeholder="选择时间点" value="{{submitContent.sendTime}}" v-model="submitContent.sendTime"  :disabled="disables" required @focus="selectTime" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputName2">发送消息类型:</label>
                                    <select name="sendWay" id="hospital-sort" class="form-control roles-type" v-model="submitContent.sendWay" :disabled="disables">
                                        <option v-for="item in dictionary.sendWay" value="{{item.key}}">{{item.text}}</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputName2">发送慢病组别:</label>
                                    <select name="chronic" id="manbing-sort" class="form-control roles-type" v-model="submitContent.chronic" :disabled="disables">
                                        <option v-for="item in dictionary.chronic" value="{{item.chronic}}">{{item.chronicText}}</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputName2">发送会员类型:</label>
                                    <select name="memberType" id="manbing-vip" class="form-control roles-type" v-model="submitContent.memberType" :disabled="disables">
                                        <option v-for="item in dictionary.memberType" value="{{item.memberType}}">{{item.memberName}}</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="top">消息内容:</label>
                                    <textarea name="content" type="text" class="form-control" v-model="submitContent.content" required  :disabled="disables"></textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="cencert-add" v-if="!disables">确 认</button>
                                <button class="cencert-add abandon" v-if="disables" @click.stop.prevent="abandonMessage">确认作废</button>
                            </div>
                            <!-- select-time-header -->
                            <!-- 用药提醒选择时分 -->
                            <div class="modal fade" id="selectedHM" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-body cbafter">
                                            <div class="form-group-time">
                                                <label class="top">小时:</label>
                                                <select class="form-control" v-model="selectedH" @change="timeChange(this.selectedH,this.selectedM)" required>
                                                    <option :value="parseInt(n)>9?n+'':'0'+n" v-for="n in 24">{{n>9?n:'0'+n}}</option>
                                                </select>
                                            </div>
                                            <div class="form-group-time">
                                                <label class="top">分钟:</label>
                                                <select class="form-control" v-model="selectedM" @change="timeChange(this.selectedH,this.selectedM)" required>
                                                    <option :value="parseInt(n)>9?n+'':'0'+n" v-for="n in 60">{{n>9?n:'0'+n}}</option>
                                                </select>
                                            </div>
                                            <div class="validation-tips" v-if="validationHM">小时/分钟皆为必选项!</div>
                                        </div>
                                        <div class="modal-footer">
                                            <div class="centerbutton">
                                                <button @click.prevent="getSelTime(this.selectedH,this.selectedM)" class="default ok center">确认</button>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal -->
                            </div>
                            <!-- select-time-footer -->
                        </div>
                        <!-- /.modal-content -->
                    </div>
                  </form>
                <!-- /.modal -->
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
import 'assets/lib/laydate/laydate.js'
import 'assets/lib/laydate/need/laydate.css'
import 'assets/lib/laydate/skins/danlan/laydate.css'
//require('timedropper')
//import 'assets/lib/laydate/timedropper.min.css'

import 'assets/reset.css'
import Public from 'assets/public.js'
import moduleHead from 'components/module-head'
import menuList from 'components/menu-list'

export default {
    data() {
            return {
                // 获取消息列表
                getMsgList: [],

                //操作提示
                operaTips: '',

                //字典查询（含接口请求）
                dictionary: {
                    messageType: {},
                    sendWay: {},
                    chronic: {},
                    memberType: {}
                },

                //提交内容
                submitContent: {
                    messageType: "02", //字典base_messageType消息类型：01生日、02节日
                    messageName: "",//消息名称
                    sendDate: "",//发送日期 消息类型为01生日时,该字段为null
                    sendTime: "",//发送的时间点：格式为00:00
                    chronic: 0,//慢病类型 其中0全部
                    chronicName: "",//慢病名称
                    memberType: 0,//会员类型 其中0全部 -1非会员
                    memberName: "",//会员名称
                    sendWay: "01",//字典base_remindStyle提醒方式：01消息 02短信
                    content: ""//消息内容
                },

                //废弃禁止编辑
                disables: false,
                //废弃主键id
                messageDefId: 0,

                //发送日期显示
                showSendDate: true,
                //发送时间
                selectedH: '',
                selectedM: '',

                //验证
                validationHM: false
            }
        },
        computed: {

        },
        components: {
            moduleHead, menuList//, bootPage
        },
        events: {
            /*// 分页列表数据
            'data' (data) {
                this.patientlist = data
            },
            'personInfo' (item){
                this.savepatient.personName=item.person.personName;
                this.savepatient.mpiId=item.person.mpiId;
                this.savepatient.phoneNo=item.person.phoneNo;
            }*/
        },
        ready() {
            //初始化日期
            this.initDatePlugin();
            //获取消息列表
            this.getMessageList();
            //字典查询
            this.dictionaryRequest();
            //慢病列表/会员类型数据获取
            this.chronicMemberType();
        },
        methods: {
            //初始化日期
            initDatePlugin () {
                var that = this;
                //发送日期
                laydate({
                    elem: '#send-date',
                    min: laydate.now(),
                    format: 'YYYY-MM-DD',
                    choose: function(datas) { //选择日期完毕的回调
                        that.submitContent.sendDate = datas;
                    }
                });
                //发送时间
                /*laydate({
                    elem: '#send-time',
                    min: laydate.now(),
                    format: 'YYYY-MM-DD hh:mm',
                    istime: true,
                    choose: function(datas) { //选择日期完毕的回调
                        that.submitContent.sendTime = datas.substr(11);
                    }
                });*/
                //$("#send-time").timeDropper();
            },
            //获取消息列表
            getMessageList () {
                $.when(Public.commonajax('coms.messageService','queryMassMessageDef','[]')).done(res=> {
                    if(res.code != 200){
                        Public.ajaxPrompt('获取消息列表出错!');
                    }else{
                        this.getMsgList = res.body;
                    };
                });
            },

            //字典查询
            dictionaryRequest () {
                var arr = ['base.dictionary.base_messageType','base.dictionary.base_remindStyle'];
                $.when(Public.commonajax("coms.multipleDictionaryService", "findDic", '['+JSON.stringify(arr)+']'))
                .done(dic=> {
                    $.each(dic.body,(index,ele)=>{
                        if(ele.dicId == arr[0]){
                            this.dictionary.messageType = ele.items;
                        }
                        if(ele.dicId == arr[1]){
                            this.dictionary.sendWay = ele.items;console.log(this.dictionary.sendWay)
                        }
                    });
                });
            },

            //慢病列表/会员类型数据获取
            chronicMemberType () {
                //慢病列表
                $.when(Public.commonajax('coms.messageService','queryChronic','[]')).done(res=> {
                    this.dictionary.chronic = res.body;
                });
                //会员类型
                $.when(Public.commonajax('coms.messageService','queryMemberType','[]')).done(res=> {
                    this.dictionary.memberType = res.body;
                });
            },

            // 新增--修改
            newAddMsgTypeMaintain(tag,item) {
                this.disables = false;
                $("#myModal-increase").modal("show");
                if (tag == 'modification') {
                    this.operaTips = '修改消息';
                    this.submitContent = item;
                    let temp = item.sendTime.split(':');
                    this.selectedH = temp[0];
                    this.selectedM = temp[1];
                    if(item.messageType == '01'){
                        this.showSendDate = false;
                    }else{this.submitContent.sendDate = item.sendDate.substr(0,10);};
                    return false;
                }
                if(tag == 'abandon'){
                    this.operaTips = '作废消息';
                    this.disables = true;
                    this.submitContent = item;
                    if(item.messageType == '01'){
                        this.showSendDate = false;
                    }else{this.submitContent.sendDate = item.sendDate.substr(0,10);};
                    this.mainId = item.messageDefId;
                    return false;
                }
                else {
                    this.operaTips = '新增消息';
                    var newAdd = {
                        "messageType": "02", //字典base_messageType消息类型：01生日、02节日
                        "messageName": "",//消息名称
                        "sendDate": "",//发送日期 消息类型为01生日时,该字段为null
                        "sendTime": "",//发送的时间点：格式为00:00
                        "chronic": 0,//慢病类型 其中0全部
                        "chronicName": '',//慢病名称
                        "memberType": 0,//会员类型 其中0全部 -1非会员
                        "memberName": '',//会员名称
                        "sendWay": "01",//字典base_remindStyle提醒方式：01消息 02短信
                        "content": ""//消息内容
                    };
                    this.submitContent = newAdd;
                }
            },

            //保存
            saveMsgTypeMaintain() {
                this.submitContent.chronicName = $('#manbing-sort').find('option:selected').text();
                this.submitContent.memberName = $('#manbing-vip').find('option:selected').text();
                this.submitContent.sendTime = $('#send-time').val();
                $.when(Public.commonajax("coms.messageService", "saveMessageDef", "[" + JSON.stringify(this.submitContent) + "]"))
                    .done(res=> {
                        if (res.code == 200) {
                            Public.ajaxPrompt("保存成功")
                            $("#myModal-increase").modal("hide");
                            this.getMessageList();
                        }else{
                            let error = res.msg.length > 30 ? '保存失败！' : res.msg;
                            Public.ajaxPrompt(error)
                        }
                    });
            },

            //作废
            abandonMessage () {
                $.when(Public.commonajax('coms.messageService','deleteMessageDef','["'+this.mainId+'"]')).done(abs=> {
                    if(abs.code == 200){
                        Public.ajaxPrompt('已作废!');
                        this.closeModal();
                    }else{
                        let fail = abs.msg.length > 30 ? '操作失败!' : abs.msg;
                        Public.ajaxPrompt(fail);
                    }
                });
            },

            //关闭
            closeModal () {
                $("#myModal-increase").modal("hide");
                this.getMessageList();
            },

            //消息类型选择
            selectMsgType (con) {
                if(con == 'birthday'){
                    this.submitContent.sendDate = '';
                    this.showSendDate = false;
                }else{this.showSendDate = true};
            },

            //选择时间
            selectTime () {
                this.validationHM = false;
                $("#selectedHM").modal("show");
            },

            //时间改变
            timeChange (hour,minute) {
                if(hour != '' && minute != ''){
                    this.validationHM = false;
                }
            },

            //获取选择的时间
            getSelTime (hour,minute) {
                if(hour != '' && minute != ''){
                    this.validationHM = false;
                    this.submitContent.sendTime = hour + ':' + minute;
                    $("#selectedHM").modal("hide");
                }else{
                    this.validationHM = true;
                    return false;
                };
            }
        }
}
</script>

